<template>
  <!-- 实名认证页面 -->
  <view class="main">
    <view class="head">
      为了保障您的个人账户安全，更快捷的创建并加入圈子，请尽快 完成实名认证
    </view>
    <view class="content">
      <view class="name">
        <view class="left">
          <text class="xin">*</text>
          <text>姓名</text>
        </view>
        <view class="right">
          <input type="text" value="" v-model="name" placeholder="请输入姓名" />
        </view>
      </view>
      <view class="xian"></view>

      <view class="phone">
        <view class="left">
          <text>手机号</text>
        </view>
        <view class="right">
          <input
            type="text"
            value=""
            v-model="phone"
            :disabled="true"
            placeholder="请输入手机号"
          />
        </view>
      </view>
      <view class="xian"></view>

      <view class="industry">
        <view class="left">
          <text class="xin">*</text>
          <text>行业</text>
        </view>
        <view @tap="gohangye" class="right">
          <input
            type="text"
            value=""
            v-model="hangye"
            placeholder="每个月只能修改一次"
            disabled
          />
          <image src="../../imges/you.png" mode=""></image>
        </view>
      </view>
      <view class="xian"></view>

      <view class="company">
        <view class="left">
          <text class="xin">*</text>
          <text>公司</text>
        </view>
        <navigator
          :url="'/pages/per_center/company?company=' + company"
          hover-class="none"
          class="right"
        >
          <input
            type="text"
            value=""
            v-model="company"
            placeholder="请输入公司名称"
          />
          <image src="../../imges/you.png" mode=""></image>
        </navigator>
      </view>
      <view class="xian"></view>

      <view class="position">
        <view class="left">
          <text>职务</text>
        </view>
        <view class="right">
          <input
            type="text"
            value=""
            v-model="zhiwu"
            placeholder="请输入职务"
          />
        </view>
      </view>
      <view class="xian"></view>

      <view class="city">
        <view class="left">
          <text>城市</text>
        </view>
        <navigator
          :url="
            '/pages/per_center/city?shi=' +
            shimingData.provinceStr +
            '&qu=' +
            shimingData.cityStr
          "
          hover-class="none"
          class="right"
        >
          <input type="text" value="" v-model="city" placeholder="请选择城市" />
          <image src="../../imges/you.png" mode=""></image>
        </navigator>
      </view>
    </view>
    <view class="save" @tap="save"> 保存 </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      shimingData: {},
      name: "",
      phone: "",
      hangye: "",
      company: "",
      zhiwu: "",
      city: "",
      ifRenzheng: 1,
      isUpdateIndustry: "",
      hangyeId: "",
      shengId: "",
      shiId: "",
    };
  },
  onShow() {
    const that = this;
    uni.getStorage({
      key: "gsName",
      success: function (res) {
        that.company = res.data;
      },
    });
    uni.getStorage({
      key: "hangye",
      success: function (res) {
        that.hangye = res.data.name;
        that.hangyeId = res.data.id;
      },
    });
    uni.getStorage({
      key: "city",
      success: function (res) {
        that.city = res.data.name;
        that.shengId = res.data.shengId;
        that.shiId = res.data.shiId;
      },
    });
    uni.removeStorage({
      key: "gsName",
      success: function (res) {
        console.log("success");
      },
    });
    uni.removeStorage({
      key: "hangye",
      success: function (res) {
        console.log("success");
      },
    });
    uni.removeStorage({
      key: "city",
      success: function (res) {
        console.log("success");
      },
    });
  },
  onLoad(option) {
    this.isRenzheng();
    this.shiming();
  },
  methods: {
    gohangye() {
      if (this.isUpdateIndustry == 1) {
        uni.navigateTo({
          url:
            "/pages/per_center/industry?industry=" +
            this.shimingData.industry +
            "&name=" +
            this.shimingData.industryStr,
        });
      } else {
        uni.showToast({
          title: "每个月只能修改一次",
          duration: 2000,
          icon: "none",
        });
      }
    },
    isRenzheng() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/personalSpace/isRealUser",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          console.log(res.data.code);
          if (res.data.code == 200) {
            that.ifRenzheng = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    shiming() {
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/personalSpace/getRealUserInformation",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          console.log(res.data.code);
          if (res.data.code == 200) {
            that.shimingData = res.data.data;
            that.name = res.data.data.realName;
            that.phone = res.data.data.telphone;
            that.hangye = res.data.data.industryStr;
            that.company = res.data.data.company;
            that.zhiwu = res.data.data.post;
            that.city = res.data.data.provinceStr + res.data.data.cityStr;
            that.isUpdateIndustry = res.data.data.isUpdateIndustry;
            that.hangyeId = res.data.data.industry;
            that.shengId = res.data.data.provinceId;
            that.shiId = res.data.data.cityId;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    save() {
      let token = uni.getStorageSync("token");
      const that = this;
      if (this.name == "" || this.name == undefined) {
        uni.showToast({
          title: "请输入姓名！",
          duration: 2000,
          icon: "none",
        });
      } else if (
        this.hangye == "" ||
        (this.hangye == undefined && this.isUpdateIndustry == 0)
      ) {
        uni.showToast({
          title: "请选择行业",
          duration: 2000,
          icon: "none",
        });
      } else if (this.company == "" || this.company == undefined) {
        uni.showToast({
          title: "请选择或输入公司",
          duration: 2000,
          icon: "none",
        });
      } else if (this.phone && !/^1[3456789]\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "手机号码有误，请重新输入",
          duration: 2000,
          icon: "none",
        });
      } else {
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/personalSpace/realUserInformation",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              realName: this.name,
              industry: this.hangyeId,
              company: this.company,
              post: this.zhiwu,
              provinceId: this.shengId,
              cityId: this.shiId,
            },
          }).then((res) => {
            console.log(res.data.code);
            if (res.data.code == 200) {
              uni.showToast({
                title: "保存成功",
                duration: 2000,
                icon: "none",
              });
              setTimeout(function () {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1500);
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  height: 100vh;
  background-color: #f8f8fa;
  .head {
    height: 94rpx;
    background-color: #fffee3;
    padding: 14rpx 32rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f81414;
    line-height: 47rpx;
  }
  .content {
    padding: 0 0 0 32rpx;
    background-color: #ffffff;
    margin-bottom: 150rpx;
    .name,
    .phone,
    .industry,
    .company,
    .position,
    .city {
      display: flex;
      padding: 30rpx 0;
      align-items: center;
      .left {
        width: 98rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 70rpx;
        .xin {
          color: #f81414;
          margin-right: 10rpx;
        }
        text {
          font-size: 32rpx;
          color: #464646;
          font-weight: 400;
        }
      }
      .right {
        width: 518rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          width: 460rpx;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
        image {
          width: 22rpx;
          height: 27rpx;
        }
      }
    }
    .xian {
      height: 1rpx;
      background-color: #eeeeee;
    }
  }
  .save {
    width: 686rpx;
    height: 80rpx;
    background-color: #2168eb;
    text-align: center;
    line-height: 80rpx;
    color: #ffffff;
    font-size: 32rpx;
    border-radius: 40rpx;
    margin: 0 auto;
  }
}
</style>
